html,
body {
    margin: 0;
    padding: 0;
}

.container {
    width: 1080px;
    margin: 10px auto;
}

.editor {
    display: flex;
}

.tools {
    vertical-align: middle;
    background: #dfdfdf;
}

.tools .graphic-object {
    display: block;
    width: 64px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #aaa;
    margin: 2px;
    background: #fff;
    text-align: center;
}

.canvas-area {
    width: 640px;
    height: 500px;
    /* height: 640px; */
    border: 1px solid #aaa;
}

.inspector-area {
    background: #dfdfdf;
    padding: 8px;
    /* display: none; */
}

.hidden {
    display: none;
}

.preview-area {
    display: flex;
}

.preview {
    margin: 20px auto;
}

.data-area {
    width: 420px;
    height: 480px;
    padding: 10px;
    word-wrap: break-word;
    overflow: hidden;
    overflow-y: auto;
}